﻿@model HS.Domain.EF.Promocion
@using HS.Domain.EF;
@using Newtonsoft.Json;
@{
    Layout = null;
}

<div class="row">
    <div class="col-sm-12">
        <ol class="breadcrumb">
            <li><a href="index-2.html#">Promociones</a></li>
            <li><a href="index-2.html#">Configuración</a></li>
            <li class="active">Generar Promoción</li>
        </ol>

        <div class="box">
            <div class="box-header">
                <h2>Detalles de la Promoción</h2>
            </div>

            <div class="toolbar">
                <a id="btn_EditarPromocion" role="button" class="btn btn-sm btn-primary"><i class="icon-edit"></i>&nbsp;Editar</a>
                <a id="btn_CrearPromocion" role="button" class="btn btn-sm btn-default"><i class="icon-plus"></i>&nbsp;Crear</a>
                <a id="btn_CancelarPromocion" role="button" class="btn btn-sm btn-default"><i class="icon-remove"></i>&nbsp;Cancelar</a>
            </div>

            <div id="PromocionVM" class="box-content">
                <div class="row">
                    <div class="col-sm-12">
                        <ul id="GenerarPromocionTabs" class="nav tab-menu nav-tabs">
                            <li class="active"><a href="#InformacionGeneralTab">Información General</a></li>
                            <li><a href="#CondicionesTab">Condiciones</a></li>
                            <li><a href="#BeneficiosTab">Beneficios</a></li>
                        </ul>

                        <div id="GenerarPromocionTabsContent" class="tab-content">
                            <div class="tab-pane active" id="InformacionGeneralTab">
                                <div class="form-horizontal">
                                    <div class="col-sm-7">
                                        <div class="well" style="height: 300px">
                                            <div class="col-sm-7">
                                                <label>Código</label>
                                                <div class="clear-fix"></div>
                                                <div class="controls col-sm-6 no-padding-left">
                                                    <input id="txt_CodigoPromocion" class="form-control focused align-right" type="text" data-bind="value: Promocion.Codigo" disabled>
                                                </div>
                                            </div>

                                             <div class="col-sm-5">
                                                <div class="space-10"></div>
                                                <div class="col-sm-12">
                                                    <label class="checkbox">
                                                        <input type="checkbox" id="chk_EsAcumulable" data-bind="checked: Promocion.EsAcumulable" disabled>
                                                        Promoción No Acumulable
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="clearfix"></div>

                                            <div class="col-sm-12">
                                                <label>Nombre Promoción</label>
                                                <div class="controls">
                                                    <input id="txt_NombrePromocion" class="form-control focused" type="text" placeholder="Ingrese nombre de promoción…" data-bind="value: Promocion.Nombre" disabled>
                                                </div>
                                            </div>

                                            <div class="col-sm-12">
                                                <label>Descripción</label>
                                                <div class="controls">
                                                    <textarea id="txt_DescripcionPromocion" rows="4" placeholder="Ingrese descripción…" data-bind="value: Promocion.Descripcion" style="width: 100%; overflow: hidden; word-wrap: break-word; resize: vertical; height: 57px;" disabled></textarea>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 no-padding">
                                                <div class="col-sm-7 no-padding-left">
                                                    <div class="col-sm-12">
                                                        <label>Estado</label>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <input id="txt_Estado" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                                            data-bind="value: Promocion.IdEstadoGeneral, source: estadosGeneralesDS" data-value-field="IdEstadoGeneral" data-text-field="Nombre" style="width: 100%" disabled/>
                                                    </div>
                                                </div>

                                                <div class="col-sm-5 no-padding">
                                                    <div class="col-sm-12">
                                                        <label>Prioridad (1 - Mínimo / 10 - Máximo)</label>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <input id="txt_PrioridadPromocion" class="form-control focused align-right" type="text" data-bind="value: Promocion.Prioridad" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-5">
                                        <div class="well" style="height: 300px">
                                            <div class="col-sm-12">
                                                <label>Campaña</label>
                                            </div>

                                            <div class="col-sm-12">
                                                <label>Código</label>
                                                <div class="controls">
                                                    <input id="txt_CodigoCampania" class="form-control focused" type="text" data-bind="value: Promocion.Campania.Codigo" disabled>
                                                </div>
                                            </div>

                                            <div class="col-sm-12">
                                                <label>Nombre Campaña</label>
                                                <div class="controls">
                                                    <input id="txt_NombreCampania" class="form-control focused" type="text" data-bind="value: Promocion.Campania.Nombre" disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="well" style="height:130px">
                                            <div class="col-sm-12 no-padding-right align-left">
                                                <label>Inicio</label>
                                                <hr />
                                            </div>

                                            <div class="col-sm-12">
                                            <div class="col-sm-7">
                                                <label>Fecha</label>
                                                <input type="text" id="dtp_FechaInicio" data-role="datepicker" data-bind="value: Promocion.FechaInicio" disabled>
                                            </div>

                                            <div class="col-sm-5 no-padding">
                                                <div class="col-sm-12 no-padding">
                                                    <label>Hora</label>
                                                </div>
                                                <div class="input-group col-sm-12 no-padding bootstrap-timepicker">
                                                    <span class="input-group-addon"><i class="icon-time"></i></span>
                                                    <input type="text" id="dtm_HoraInicio" class="form-control timepicker" value="11:30 PM" data-bind="value: Promocion.HoraInicio" disabled>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="well" style="height:130px">
                                            <div class="col-sm-12 no-padding-left align-left">
                                                <label>Fin</label>
                                                <hr />
                                            </div>

                                            <div class="col-sm-12">
                                            <div class="col-sm-7 no-padding-left">
                                                <label>Fecha</label>
                                                <input type="text" id="dtp_FechaFin" data-role="datepicker" data-bind="value: Promocion.FechaTermino" disabled>
                                            </div>

                                            <div class="col-sm-5 no-padding-left">
                                                <div class="col-sm-12 no-padding">
                                                    <label>Hora</label>
                                                </div>
                                                <div class="input-group col-sm-12 no-padding bootstrap-timepicker">
                                                    <span class="input-group-addon"><i class="icon-time"></i></span>
                                                    <input type="text" id="dtm_HoraFin" class="form-control timepicker" value="11:30 PM" data-bind="value: Promocion.HoraTermino" disabled>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="CondicionesTab">
                                <div class="form-horizontal">
                                    <div class="col-sm-12">
                                        <label>Lista de Condiciones</label>
                                    </div>

                                    <div class="col-sm-12">
                                        <div id="grd_CondicionesList" data-role="grid" style="height: auto; width: auto"
                                            data-bind="source: Promocion.Condiciones"
                                            data-column="true" data-navigatable="true" data-selectable="row"
                                            data-pageable="true" data-sortable="true"
                                            data-filterable="true" data-resizable="true" data-groupable="true"
                                            data-columns='[        
                                                    { "field": "TipoCondicion.Nombre",          "title": "Tipo",        "width": "59px"  }
                                                ]'>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="BeneficiosTab">
                                <div class="form-horizontal">
                                    <div class="col-sm-12">
                                        <label>Lista de Beneficios</label>
                                    </div>

                                    <div class="col-sm-12">
                                        <div id="grd_BeneficiosList" data-role="grid" style="height: auto; width: auto"
                                            data-bind="source: Promocion.Beneficios"
                                            data-column="true" data-navigatable="true" data-selectable="row"
                                            data-pageable="true" data-sortable="true"
                                            data-filterable="true" data-resizable="true" data-groupable="true"
                                            data-columns='[        
                                                { "field": "NivelBeneficio.Nombre",         "title": "Nivel",       "width": "150px"  },
                                                { "field": "TipoBeneficio.Nombre",          "title": "Tipo",        "width": "250px"  }
                                            ]'>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var PromocionVM = null,
        PromocionTemp = @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));

    $(document).ready(function () {
        SetTabMenusAction();

        PromocionVM = new kendo.observable({
            Promocion: @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore })),
            estadosGeneralesDS: AjaxModelActionPost('@Url.Action("GetEntities", "EstadoGeneral")')
        });

        kendo.bind($('#PromocionVM'), PromocionVM);

        SetDefaultKeyDownAction('.box-content', 'EditarPromocion');

        /* start: Toolbar Actions */
        $('#btn_EditarPromocion').click(function () {
            EditarPromocion();
        });

        $('#btn_CrearPromocion').click(function () {
            RenderContentHtml('@Url.Action("Edit", "Promocion")', '#content');
        });

        $('#btn_CancelarPromocion').click(function () {
            RenderContentHtml('@Url.Action("Search", "Promocion")', '#content');
        });
        /* end: Toolbar Actions */
    });

    function EditarPromocion() {
        RenderContentHtml('@Url.Action("Edit", "Promocion")?id=' + PromocionVM.get('Promocion.IdPromocion'), '#content');
    }
</script>
